<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../img/asset-favico.ico">
        <title>守护云健康管家</title>
        <link rel="stylesheet" href="../css/page-health-index.css" />
        <link rel="stylesheet" href="../css/page-health-login.css" />
        <link rel="stylesheet" href="../plugins/elementui/index.css" />
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <script src="../plugins/jquery/dist/jquery-min.js"></script>
        <script src="../plugins/healthmobile.js"></script>
        <script src="../plugins/vue/vue.js"></script>
        <script src="../plugins/vue/axios-0.18.0.js"></script>

        <style>
            .el-carousel__item h3 {
                color: #475669;
                font-size: 14px;
                opacity: 0.75;
                line-height: 150px;
                margin: 0;
            }

            .el-carousel__item:nth-child(2n) {
                background-color: #99a9bf;
            }

            .el-carousel__item:nth-child(2n+1) {
                background-color: #d3dce6;
            }
        </style>
    </head>
    <body data-spy="scroll" data-target="#myNavbar" data-offset="150">
        <div class="app" id="app">
            <!-- 页面头部 -->
            <div class="top-header">
                <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
                <span class="center">守护云健康管家</span>
                <span class="f-right"><i class="icon-more"></i></span>
            </div>
            <template>
                <div class="block">
                    <el-carousel trigger="click" height="250px">
                        <el-carousel-item v-for="item in previewList" :key="item">
                            <img :src="item.previewImage" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </template>

            <!-- 页面内容 -->
            <div class="contentBox">
                <div class="list-column2">
                    <ul class="list">
                        <li class="type-item">
                            <a href="./regRecord.html" class="link-page">
                                <div class="type-title">
                                    <h3>挂号就诊</h3>
                                    <p>实时预约</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-zhen">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="./report.html" class="link-page">
                                <div class="type-title">
                                    <h3>诊单查询</h3>
                                    <p>一键查询</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-search"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="./health-information.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康新闻</h3>
                                    <p>健康与你我相关</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-star"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="./health-intervention.html" class="link-page">
                                <div class="type-title">
                                    <h3>医生方案</h3>
                                    <p>查看方案</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-plus"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="./record.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康档案</h3>
                                    <p>掌上查询</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-record"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="health-BMI.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康指标</h3>
                                    <p>查看指标</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-person"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="img-parent">
                    <img src="../img/asset-ad.png" width="100%" height="100%" />
                </div>
            </div>
        </div>
        <script>
            $(function() {
                var ht = $('.banner-item').find('img').eq(0).height()
                var tg = $('.banner-item .item');
                var num = 0;
                for (i = 0; i < tg.length; i++) {
                    $('.indicators').append('<span></span>');
                    $('.indicators').find('span').eq(num).addClass('active');
                }
                $(".banner-item,.banner-roll").css('height', ht)

                function roll() {
                    tg.eq(num).animate({
                        'opacity': '1',
                        'z-index': num
                    }, 2000).siblings().animate({
                        'opacity': '0',
                        'z-index': 0
                    }, 2000);
                    $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
                    if (num >= tg.length - 1) {
                        num = 0;
                    } else {
                        num++;
                    }
                }
                $('.indicators').find('span').click(function() {
                    num = $(this).index();
                    roll();
                });
                var timer = setInterval(roll, 3000);
                $('.banner-item').mouseover(function() {
                    clearInterval(timer)
                });
                $('.banner-item').mouseout(function() {
                    timer = setInterval(roll, 3000)
                });
            })
            $(window).resize(function() {
                var ht = $('.banner-item').find('img').eq(0).height()
                $(".banner-item,.banner-roll").css('height', ht)
            });
        </script>
        <script src="../plugins/vue/vue.js"></script>
        <script src="../plugins/vue/axios-0.18.0.js"></script>
        <script src="../plugins/elementui/index.js"></script>

        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                    previewList: []
                },
                mounted (){
                    axios.get("/reg/system/preview/appList").then((res) => {
                        let resData = res.data
                        if(resData.code === 200) {
                            // this.pcList = [(resData.data)[0]]
                            this.previewList = resData.data
                        } else {
                            this.$message.error("获取PC轮播图失败，原因为：" + resData.msg)
                        }
                    });
                },

                mothods:{
                    toPage(item) {
                        if(item.previewLink && item.previewLink !== '') {
                            console.log('跳转页面')
                        } else {
                            console.log('不跳转页面')
                        }
                    }
                }
            });
        </script>
    </body>
</html>